import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue'),
    meta: {
      title: '首页 - 深圳市晶鸿泰科技有限公司',
      keepAlive: true
    }
  },
  {
    path: '/image-test',
    name: 'ImageTest',
    component: () => import('../views/ImageTestPage.vue'),
    meta: {
      title: '图片测试 - 深圳市晶鸿泰科技有限公司'
    }
  },
  {
    path: '/final-test',
    name: 'FinalTest',
    component: () => import('../views/FinalBannerTest.vue'),
    meta: {
      title: '轮播图最终验证 - 深圳市晶鸿泰科技有限公司'
    }
  },

  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue'),
    meta: {
      title: '关于我们 - 深圳市晶鸿泰科技有限公司'
    }
  },
  {
    path: '/products',
    name: 'Products',
    component: () => import('../views/Products.vue'),
    meta: {
      title: '产品展示 - 深圳市晶鸿泰科技有限公司'
    }
  },
  {
    path: '/products/:id',
    name: 'ProductDetail',
    component: () => import('../views/ProductDetail.vue'),
    meta: {
      title: '产品详情 - 深圳市晶鸿泰科技有限公司'
    }
  },
  {
    path: '/cases',
    name: 'Cases',
    component: () => import('../views/Cases.vue'),
    meta: {
      title: '案例中心 - 深圳市晶鸿泰科技有限公司'
    }
  },
  {
    path: '/news',
    name: 'News',
    component: () => import('../views/News.vue'),
    meta: {
      title: '新闻咨询 - 深圳市晶鸿泰科技有限公司'
    }
  },
  {
    path: '/contact',
    name: 'Contact',
    component: () => import('../views/Contact.vue'),
    meta: {
      title: '联系我们 - 深圳市晶鸿泰科技有限公司'
    }
  },
  {
    // 捕获所有未匹配的路由，重定向到首页
    path: '/:pathMatch(.*)*',
    redirect: '/'
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior(_to, _from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { top: 0 }
    }
  },
})

// 全局前置守卫，设置页面标题
router.beforeEach((to, _from, next) => {
  // 设置页面标题
  document.title = to.meta.title as string || '深圳市晶鸿泰科技有限公司'
  next()
})

export default router